<!--
  ~ Copyright 2020 Xiaomi
  ~
  ~    Licensed under the Apache License, Version 2.0 (the "License");
  ~    you may not use this file except in compliance with the License.
  ~    You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~    Unless required by applicable law or agreed to in writing, software
  ~    distributed under the License is distributed on an "AS IS" BASIS,
  ~    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~    See the License for the specific language governing permissions and
  ~    limitations under the License.
  -->

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/icon.ico">
    <title>500</title>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            font-family: 'Quicksand', sans-serif;
            font-weight: 400;
            overflow: hidden;
        }

        .writing {
            width: 320px;
            height: 200px;
            background-color: #3f3f3f;
            border: 1px solid #bbbbbb;
            border-radius: 6px 6px 4px 4px;
            position: relative;
        }
        .writing .topbar {
            position: absolute;
            width: 100%;
            height: 12px;
            background-color: #f1f1f1;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        .writing .topbar div {
            height: 6px;
            width: 6px;
            border-radius: 50%;
            margin: 3px;
            float: left;
        }
        .writing .topbar div.green {
            background-color: #60d060;
        }
        .writing .topbar div.red {
            background-color: red;
        }
        .writing .topbar div.yellow {
            background-color: #e6c015;
        }
        .writing .code {
            padding: 15px;
        }
        .writing .code ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .writing .code ul li {
            background-color: #9e9e9e;
            width: 0;
            height: 7px;
            border-radius: 6px;
            margin: 10px 0;
        }
        .container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
            -webkit-transition: -webkit-transform .5s;
            transition: -webkit-transform .5s;
            transition: transform .5s;
            transition: transform .5s, -webkit-transform .5s;
        }
        .stack-container {
            position: relative;
            width: 420px;
            height: 210px;
            -webkit-transition: width 1s, height 1s;
            transition: width 1s, height 1s;
        }
        .pokeup {
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }
        .pokeup:hover {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
            -webkit-transition: .3s ease;
            transition: .3s ease;
        }
        .error {
            width: 400px;
            padding: 40px;
            text-align: center;
        }
        .error h1 {
            font-size: 125px;
            padding: 0;
            margin: 0;
            font-weight: 700;
        }
        .error h2 {
            margin: -30px 0 0 0;
            padding: 0px;
            font-size: 47px;
            letter-spacing: 12px;
        }
        .perspec {
            -webkit-perspective: 1000px;
            perspective: 1000px;
        }
        .writeLine {
            -webkit-animation: writeLine .4s linear forwards;
            animation: writeLine .4s linear forwards;
        }
        .explode {
            -webkit-animation: explode .5s ease-in-out forwards;
            animation: explode .5s ease-in-out forwards;
        }
        .card {
            -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
            animation: tiltcard .5s ease-in-out 1s forwards;
            position: absolute;
        }
        @-webkit-keyframes tiltcard {
            0% {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }

            100% {
                -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
            }
        }
        @keyframes tiltcard {
            0% {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }

            100% {
                -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
            }
        }
        @-webkit-keyframes explode {
            0% {
                -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
            }

            100% {
                -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
            }
        }
        @keyframes explode {
            0% {
                -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
            }

            100% {
                -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
            }
        }
        @-webkit-keyframes writeLine {
            0% {
                width: 0;
            }

            100% {
                width: var(--linelength);
            }
        }
        @keyframes writeLine {
            0% {
                width: 0;
            }

            100% {
                width: var(--linelength);
            }
        }
        @media screen and (max-width: 1000px) {
            .container {
                -webkit-transform: scale(.85);
                transform: scale(.85);
            }
        }
        @media screen and (max-width: 850px) {
            .container {
                -webkit-transform: scale(.75);
                transform: scale(.75);
            }
        }
        @media screen and (max-width: 775px) {
            .container {
                -ms-flex-wrap: wrap-reverse;
                flex-wrap: wrap-reverse;
                -webkit-box-align: inherit;
                -ms-flex-align: inherit;
                align-items: inherit;
            }
        }
        @media screen and (max-width: 370px) {
            .container {
                -webkit-transform: scale(.6);
                transform: scale(.6);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="error">
            <h1>500</h1>
            <h2>error</h2>
            <p>Ruh-roh, something just isn't right... Time to paw through your logs and get down and dirty in your
                stack-trace;)</p>
        </div>
        <div class="stack-container">
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-container">
                <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
                    <div class="card">
                        <div class="writing">
                            <div class="topbar">
                                <div class="red"></div>
                                <div class="yellow"></div>
                                <div class="green"></div>
                            </div>
                            <div class="code">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        const stackContainer = document.querySelector('.stack-container');
        const cardNodes = document.querySelectorAll('.card-container');
        const perspecNodes = document.querySelectorAll('.perspec');
        const perspec = document.querySelector('.perspec');
        const card = document.querySelector('.card');

        let counter = stackContainer.children.length;

        //function to generate random number
        function randomIntFromInterval(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        //after tilt animation, fire the explode animation
        card.addEventListener('animationend', function () {
            perspecNodes.forEach(function (elem, index) {
                elem.classList.add('explode');
            });
        });

        //after explode animation do a bunch of stuff
        perspec.addEventListener('animationend', function (e) {
            if (e.animationName === 'explode') {
                cardNodes.forEach(function (elem, index) {

                    //add hover animation class
                    elem.classList.add('pokeup');

                    //add event listner to throw card on click
                    elem.addEventListener('click', function () {
                        let updown = [800, -800]
                        let randomY = updown[Math.floor(Math.random() * updown.length)];
                        let randomX = Math.floor(Math.random() * 1000) - 1000;
                        elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
                        elem.style.transition = "transform 1s ease, opacity 2s";
                        elem.style.opacity = "0";
                        counter--;
                        if (counter === 0) {
                            stackContainer.style.width = "0";
                            stackContainer.style.height = "0";
                        }
                    });

                    //generate random number of lines of code between 4 and 10 and add to each card
                    let numLines = randomIntFromInterval(5, 10);

                    //loop through the lines and add them to the DOM
                    for (let index = 0; index < numLines; index++) {
                        let lineLength = randomIntFromInterval(25, 97);
                        var node = document.createElement("li");
                        node.classList.add('node-' + index);
                        elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');

                        //draw lines of code 1 by 1
                        if (index == 0) {
                            elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
                        } else {
                            elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
                                elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
                            });
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>